<template>
	<view class="control-container">
		<!-- Token错误提示 -->
		<view class="token-error-hint" v-if="showTokenError">
			<view class="hint-content">
				<text class="hint-text">检测到授权信息缺失，可能导致部分功能无法使用。</text>
				<button class="hint-btn" @tap="reLogin">重新登录</button>
				<text class="hint-close" @tap="closeTokenHint">×</text>
			</view>
		</view>
		
		<!-- 设备状态概览 -->
		<view class="status-overview">
			<view class="status-item">
				<text class="status-title">设备总数</text>
				<text class="status-value">{{deviceStats.total}}</text>
			</view>
			<view class="status-divider"></view>
			<view class="status-item">
				<text class="status-title">在线设备</text>
				<text class="status-value online">{{deviceStats.online}}</text>
			</view>
			<view class="status-divider"></view>
			<view class="status-item">
				<text class="status-title">异常设备</text>
				<text class="status-value warning">{{deviceStats.warning}}</text>
			</view>
		</view>

		

		<!-- 设备类型切换 -->
		<scroll-view class="device-types" scroll-x>
			<view 
				class="type-item" 
				v-for="(type, index) in deviceTypes" 
				:key="index"
				:class="{ active: currentType === type.id }"
				@tap="switchDeviceType(type.id)"
			>
				{{type.name}}
			</view>
		</scroll-view>

		<!-- 设备列表 -->
		<swiper class="device-list-container" :current="currentTypeIndex" @change="handleSwiperChange">
			<!-- 环境检测设备列表 -->
			<swiper-item>
				<scroll-view scroll-y class="device-list">
				<!-- 设备日志入口 -->
				<view class="logs-entry" @tap="openDeviceLogs">
					<view class="logs-entry-content">
						<image class="logs-icon" src="/static/icons/logs.png" mode="aspectFit"></image>
						<text class="logs-text">设备日志</text>
					</view>
					<text class="logs-arrow">›</text>
				</view>
				
				<!-- 设备管理模块 -->
				<view class="device-management">
					<view class="section-title">
						<text>设备管理</text>
						<view class="add-button" @tap="openAddDeviceModal">
							<text class="icon">+</text>
							<text>添加设备</text>
						</view>
					</view>
					
					<!-- 设备筛选 -->
					<view class="filter-wrapper">
						<view class="filter-title">设备筛选</view>
						<view class="filter-options">
							<view 
								class="filter-option" 
								:class="{ active: currentFilter === 'all' }" 
								@tap="filterDevices('all')"
							>
								全部
							</view>
							<view 
								class="filter-option" 
								:class="{ active: currentFilter === 'online' }" 
								@tap="filterDevices('online')"
							>
								在线
							</view>
							<view 
								class="filter-option" 
								:class="{ active: currentFilter === 'offline' }" 
								@tap="filterDevices('offline')"
							>
								离线
							</view>
							<view 
								class="filter-option" 
								:class="{ active: currentFilter === 'alert' }" 
								@tap="filterDevices('alert')"
							>
								异常
							</view>
							<view 
								v-for="(type, index) in deviceTypes" 
								:key="index"
								class="filter-option" 
								:class="{ active: currentFilter === type }" 
								@tap="filterDevices(type)"
							>
								{{ getDeviceTypeName(type) }}
							</view>
						</view>
					</view>
					
					<!-- 设备列表 -->
					<view class="device-list">
						<view v-if="filteredDevices.length === 0" class="empty-state">
							暂无符合条件的设备
						</view>
						<view v-else>
							<view 
								v-for="(device, index) in filteredDevices" 
								:key="device.id || index" 
								class="device-item"
							>
								<view class="device-header">
									<text class="device-name">{{ device.name }}</text>
									<text 
										class="device-status" 
										:class="{
											'online': device.status === 'online',
											'offline': device.status === 'offline',
											'alert': device.status === 'alert'
										}"
									>
										{{ 
											device.status === 'online' ? '在线' : 
											device.status === 'offline' ? '离线' : '异常' 
										}}
									</text>
								</view>
								
								<view class="device-info">
									<view class="info-item">
										<text class="label">类型:</text>
										<text>{{ getDeviceTypeName(device.type) }}</text>
									</view>
									<view class="info-item">
										<text class="label">设备ID:</text>
										<text>{{ device.deviceId }}</text>
									</view>
									<view class="info-item">
										<text class="label">位置:</text>
										<text>{{ device.location || '未设置' }}</text>
									</view>
									<view class="info-item">
										<text class="label">添加时间:</text>
										<text>{{ formatDate(device.addTime) }}</text>
									</view>
								</view>
								
								<view class="device-actions">
									<view class="action-button secondary" @tap="openDeviceDetails(device)">详情</view>
									<view class="action-button primary" @tap="openEditDeviceModal(device)">编辑</view>
									<view class="action-button danger" @tap="openDeleteDeviceModal(device)">删除</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				
				<!-- 添加/编辑设备弹窗 -->
				<view class="modal" v-if="showDeviceModal">
					<view class="modal-content">
						<view class="modal-header">
							<text class="modal-title">{{ isEditMode ? '编辑设备' : '添加设备' }}</text>
						</view>
						
						<view class="modal-body">
							<view v-if="formError" class="form-error">{{ formError }}</view>
							
							<view class="form-group">
								<view class="form-label">设备名称</view>
								<input 
									class="form-input" 
									v-model="deviceForm.name" 
									placeholder="请输入设备名称"
								/>
							</view>
							
							<view class="form-group">
								<view class="form-label">设备类型</view>
								<view class="form-select" @tap="showTypeSelector = true">
									<text v-if="deviceForm.type" class="select-value">
										{{ getDeviceTypeName(deviceForm.type) }}
									</text>
									<text v-else class="select-placeholder">请选择设备类型</text>
									<text class="select-arrow">▼</text>
								</view>
							</view>
							
							<view class="form-group">
								<view class="form-label">设备ID</view>
								<input 
									class="form-input" 
									v-model="deviceForm.deviceId" 
									placeholder="请输入设备ID"
								/>
							</view>
							
							<view class="form-group">
								<view class="form-label">位置信息</view>
								<input 
									class="form-input" 
									v-model="deviceForm.location" 
									placeholder="请输入设备位置信息(选填)"
								/>
							</view>
						</view>
						
						<view class="modal-footer">
							<view class="modal-button cancel" @tap="closeDeviceModal">取消</view>
							<view 
								class="modal-button confirm" 
								:class="{ loading: loading }" 
								@tap="submitDeviceForm"
							>
								{{ loading ? '处理中...' : '确认' }}
							</view>
						</view>
					</view>
				</view>
				
				<!-- 删除设备弹窗 -->
				<view class="modal" v-if="showDeleteModal">
					<view class="modal-content">
						<view class="modal-header">
							<text class="modal-title">删除设备</text>
						</view>
						
						<view class="modal-body">
							<view class="delete-message">
								确定要删除设备 "{{ deviceToDelete?.name }}" 吗？此操作无法撤销。
							</view>
						</view>
						
						<view class="modal-footer">
							<view class="modal-button cancel" @tap="closeDeleteModal">取消</view>
							<view 
								class="modal-button delete" 
								:class="{ loading: loading }" 
								@tap="confirmDeleteDevice"
							>
								{{ loading ? '删除中...' : '删除' }}
							</view>
						</view>
					</view>
				</view>
				
				<!-- 类型选择器弹窗 -->
				<view class="modal" v-if="showTypeSelector">
					<view class="modal-content">
						<view class="modal-header">
							<text class="modal-title">选择设备类型</text>
						</view>
						
						<view class="modal-body">
							<view class="filter-options">
								<view 
									v-for="(type, index) in deviceTypes" 
									:key="index"
									class="filter-option" 
									:class="{ active: deviceForm.type === type }" 
									@tap="selectDeviceType(type)"
								>
									{{ getDeviceTypeName(type) }}
								</view>
							</view>
						</view>
						
						<view class="modal-footer">
							<view class="modal-button confirm" @tap="closeTypeSelector">确认</view>
						</view>
					</view>
				</view>
				</scroll-view>
			</swiper-item>

			<!-- 智能电闸列表 -->
			<swiper-item>
				<scroll-view scroll-y class="device-list">
					<!-- 电闸状态概览 -->
					<view class="switch-overview">
						<view class="status-item">
							<text class="status-title">总电闸数</text>
							<text class="status-value">{{switchStats.total}}</text>
						</view>
						<view class="status-divider"></view>
						<view class="status-item">
							<text class="status-title">开启数量</text>
							<text class="status-value online">{{switchStats.on}}</text>
						</view>
						<view class="status-divider"></view>
						<view class="status-item">
							<text class="status-title">关闭数量</text>
							<text class="status-value">{{switchStats.off}}</text>
						</view>
						<view class="status-divider"></view>
						<view class="status-item">
							<text class="status-title">告警数量</text>
							<text class="status-value warning">{{switchStats.warning}}</text>
						</view>
					</view>
					
					<!-- 电闸分组过滤 -->
					<view class="filter-dropdown">
						<picker mode="selector" :range="['全部'].concat(switchGroups)" @change="handleSwitchGroupChange">
							<view class="picker-container">
								<text class="picker-label">房间分组：</text>
								<text class="picker-value">{{currentSwitchGroup}}</text>
								<text class="picker-arrow">▼</text>
							</view>
						</picker>
					</view>
					
					<!-- 批量控制按钮 -->
					<view class="batch-control">
						<button class="all-on" @click="controlAllSwitches(true)">一键开启</button>
						<button class="all-off" @click="controlAllSwitches(false)">一键关闭</button>
					</view>
					
					<!-- 开启的电闸列表 -->
					<view v-if="filteredOnSwitches.length > 0">
						<view class="section-title">开启电闸</view>
						<view class="device-card" v-for="(device, index) in filteredOnSwitches" :key="device.id">
							<view class="device-header">
								<view class="device-title">
									<text class="device-name">{{device.name}}</text>
									<text class="device-group">[{{device.group}}]</text>
								</view>
								<text class="device-status" :class="device.online ? 'online' : 'offline'">
									{{device.online ? '在线' : '离线'}}
								</text>
							</view>
							<view class="device-control">
								<view class="device-image">
									<image src="/static/W3QF13.png" mode="aspectFit"></image>
								</view>
								<view class="device-info">
									<view class="device-type">{{device.category}}</view>
									<view class="device-id">ID: {{device.id.substring(0, 10)}}...</view>
								</view>
								<view class="switch-button">
									<switch :checked="device.on" @change="toggleSwitch(device)" :disabled="!device.online || device.loading" color="#007AFF" />
								</view>
							</view>
						</view>
					</view>
					
					<!-- 关闭的电闸列表 -->
					<view v-if="filteredOffSwitches.length > 0">
						<view class="section-title">关闭电闸</view>
						<view class="device-card" v-for="(device, index) in filteredOffSwitches" :key="device.id">
							<view class="device-header">
								<view class="device-title">
									<text class="device-name">{{device.name}}</text>
									<text class="device-group">[{{device.group}}]</text>
								</view>
								<text class="device-status" :class="device.online ? 'online' : 'offline'">
									{{device.online ? '在线' : '离线'}}
								</text>
							</view>
							<view class="device-control">
								<view class="device-image">
									<image src="/static/W3QF13.png" mode="aspectFit"></image>
								</view>
								<view class="device-info">
									<view class="device-type">{{device.category}}</view>
									<view class="device-id">ID: {{device.id.substring(0, 10)}}...</view>
								</view>
								<view class="switch-button">
									<switch :checked="device.on" @change="toggleSwitch(device)" :disabled="!device.online || device.loading" color="#007AFF" />
								</view>
							</view>
						</view>
					</view>
					
					<!-- 定时设置弹窗 -->
					<view class="modal" v-if="showSchedule">
						<view class="modal-mask" @tap="closeScheduleModal"></view>
						<view class="modal-content">
							<view class="modal-header">
								<text class="modal-title">{{selectedSwitch ? selectedSwitch.name : ''}} 定时设置</text>
								<text class="modal-close" @tap="closeScheduleModal">×</text>
							</view>
							<view class="modal-body">
								<view class="form-item">
									<text class="form-label">操作</text>
									<radio-group @change="handleScheduleActionChange">
										<label class="radio-item">
											<radio value="on" :checked="scheduleAction === 'on'" color="#007AFF" />
											<text>开启</text>
										</label>
										<label class="radio-item">
											<radio value="off" :checked="scheduleAction === 'off'" color="#007AFF" />
											<text>关闭</text>
										</label>
									</radio-group>
								</view>
								<view class="form-item">
									<text class="form-label">日期</text>
									<picker mode="date" :value="scheduleDate" @change="handleScheduleDateChange">
										<view class="picker-box">{{scheduleDate || '请选择日期'}}</view>
									</picker>
								</view>
								<view class="form-item">
									<text class="form-label">时间</text>
									<picker mode="time" :value="scheduleTime" @change="handleScheduleTimeChange">
										<view class="picker-box">{{scheduleTime || '请选择时间'}}</view>
									</picker>
								</view>
								<view class="form-item">
									<text class="form-label">重复</text>
									<picker mode="selector" :range="repeatOptions" :value="repeatIndex" @change="handleRepeatChange">
										<view class="picker-box">{{repeatOptions[repeatIndex]}}</view>
									</picker>
								</view>
							</view>
							<view class="modal-footer">
								<button class="modal-btn cancel" @tap="closeScheduleModal">取消</button>
								<button class="modal-btn confirm" @tap="saveSchedule">保存</button>
							</view>
						</view>
					</view>
					
					<!-- 用电量统计弹窗 -->
					<view class="modal" v-if="showPowerUsage">
						<view class="modal-mask" @tap="closePowerUsageModal"></view>
						<view class="modal-content usage-modal">
							<view class="modal-header">
								<text class="modal-title">{{selectedSwitch ? selectedSwitch.name : ''}} 用电统计</text>
								<text class="modal-close" @tap="closePowerUsageModal">×</text>
							</view>
							<view class="modal-body">
								<view class="usage-tabs">
									<text 
										v-for="(tab, index) in ['日', '周', '月', '年']" 
										:key="index"
										:class="['usage-tab', usageTimeRange === ['day', 'week', 'month', 'year'][index] ? 'active' : '']"
										@tap="switchUsageTimeRange(['day', 'week', 'month', 'year'][index])"
									>{{tab}}</text>
								</view>
								<view class="usage-chart">
									<!-- TODO: 引入图表组件 -->
									<text class="chart-note">这里将显示 {{usageTimeRange === 'day' ? '今日' : usageTimeRange === 'week' ? '本周' : usageTimeRange === 'month' ? '本月' : '今年'}} 的用电量图表</text>
								</view>
								<view class="usage-stats">
									<view class="stats-item">
										<text class="stats-label">总用电量</text>
										<text class="stats-value">{{selectedSwitch ? selectedSwitch.usageStats.total : 0}}kWh</text>
									</view>
									<view class="stats-item">
										<text class="stats-label">平均用电量</text>
										<text class="stats-value">{{selectedSwitch ? selectedSwitch.usageStats.average : 0}}kWh</text>
									</view>
									<view class="stats-item">
										<text class="stats-label">最高用电量</text>
										<text class="stats-value">{{selectedSwitch ? selectedSwitch.usageStats.max : 0}}kWh</text>
									</view>
								</view>
								<view class="date-picker">
									<text class="date-picker-label">选择日期查看</text>
									<picker mode="date" @change="handleUsageDateChange">
										<view class="picker-box">{{usageDate || '选择日期'}}</view>
									</picker>
								</view>
							</view>
						</view>
					</view>
					
					<!-- 报警详情弹窗 -->
					<view class="modal" v-if="showAlarmDetails">
						<view class="modal-mask" @tap="closeAlarmDetailsModal"></view>
						<view class="modal-content alarm-modal">
							<view class="modal-header">
								<text class="modal-title">{{selectedSwitch ? selectedSwitch.name : ''}} 报警详情</text>
								<text class="modal-close" @tap="closeAlarmDetailsModal">×</text>
							</view>
							<view class="modal-body">
								<view class="alarm-current">
									<view class="alarm-title">当前报警</view>
									<view class="alarm-info">
										<view class="alarm-row">
											<text class="alarm-label">设备编号</text>
											<text class="alarm-value">{{selectedSwitch ? selectedSwitch.id : ''}}</text>
										</view>
										<view class="alarm-row">
											<text class="alarm-label">报警时间</text>
											<text class="alarm-value">{{selectedSwitch ? selectedSwitch.alarmTime : ''}}</text>
										</view>
										<view class="alarm-row">
											<text class="alarm-label">报警内容</text>
											<text class="alarm-value danger">{{selectedSwitch ? selectedSwitch.warningMessage : ''}}</text>
										</view>
										<view class="alarm-row">
											<text class="alarm-label">所在房间</text>
											<text class="alarm-value">{{selectedSwitch ? selectedSwitch.group : ''}}</text>
										</view>
										<view class="alarm-row">
											<text class="alarm-label">危险系数</text>
											<text class="alarm-value danger">{{selectedSwitch ? selectedSwitch.dangerLevel : ''}}</text>
										</view>
										<view class="alarm-row">
											<text class="alarm-label">处理建议</text>
											<text class="alarm-value">{{selectedSwitch ? selectedSwitch.suggestion : ''}}</text>
										</view>
									</view>
									<view class="alarm-status">
										<view class="status-item">
											<text class="status-label">电流</text>
											<text class="status-value">{{selectedSwitch ? selectedSwitch.current : 0}}A</text>
										</view>
										<view class="status-item">
											<text class="status-label">电压</text>
											<text class="status-value">{{selectedSwitch ? selectedSwitch.voltage : 0}}V</text>
										</view>
										<view class="status-item">
											<text class="status-label">功率</text>
											<text class="status-value warning">{{selectedSwitch ? selectedSwitch.currentPower : 0}}W</text>
										</view>
									</view>
								</view>
								
								<view class="alarm-history">
									<view class="alarm-title">历史报警记录</view>
									<view class="alarm-list">
										<view v-if="selectedSwitch && selectedSwitch.alarmHistory.length === 0" class="no-data">
											暂无历史报警记录
										</view>
										<view v-else class="alarm-item" v-for="(alarm, index) in selectedSwitch ? selectedSwitch.alarmHistory : []" :key="index">
											<view class="alarm-item-header">
												<text class="alarm-item-time">{{alarm.time}}</text>
												<text class="alarm-item-type" :class="{'high': alarm.dangerLevel === '高', 'medium': alarm.dangerLevel === '中', 'low': alarm.dangerLevel === '低'}">
													{{alarm.dangerLevel}}级
												</text>
											</view>
											<text class="alarm-item-content">{{alarm.message}}</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
// 导入第三方API工具类
import thirdPartyApi from '../common/thirdPartyApi.js';
import deviceApi from '@/pages/common/deviceApi.js';

export default {
	data() {
		return {
			deviceStats: {
				total: 15,
				online: 12,
				warning: 3
			},
			deviceTypes: [
				{ id: 'environment', name: '设备管理' },
				{ id: 'switch', name: '设备控制' }
			],
			currentType: 'environment',
			currentTypeIndex: 0,
			sensorCategories: ['全部', '环境检测', '漏水检测', '门锁', '人体检测', '烟雾检测'],
			currentCategory: '全部',
			allSensors: [
				// 环境检测传感器
				{
					id: 1,
					type: '环境检测',
					name: '客厅空气检测',
					image: '/static/sensors/environment.png',
					online: true,
					data: {
						pm25: { label: 'PM2.5', value: 35, unit: 'μg/m³', level: '良好' },
						temperature: { label: '温度', value: 26.5, unit: '℃', level: '舒适' },
						humidity: { label: '湿度', value: 65, unit: '%', level: '良好' },
						co2: { label: 'CO2', value: 800, unit: 'ppm', level: '正常' }
					},
					historyData: {
						daily: [
							{ date: '08:00', pm25: 30, temperature: 25, humidity: 60, co2: 700 },
							{ date: '12:00', pm25: 35, temperature: 27, humidity: 65, co2: 800 },
							{ date: '16:00', pm25: 40, temperature: 28, humidity: 70, co2: 850 },
							{ date: '20:00', pm25: 35, temperature: 26, humidity: 65, co2: 800 }
						],
						weekly: [
							{ date: '周一', pm25: 32, temperature: 26, humidity: 63, co2: 750 },
							{ date: '周二', pm25: 35, temperature: 27, humidity: 65, co2: 800 },
							{ date: '周三', pm25: 30, temperature: 25, humidity: 60, co2: 700 },
							{ date: '周四', pm25: 38, temperature: 28, humidity: 68, co2: 850 },
							{ date: '周五', pm25: 35, temperature: 27, humidity: 65, co2: 800 },
							{ date: '周六', pm25: 30, temperature: 25, humidity: 60, co2: 700 },
							{ date: '周日', pm25: 28, temperature: 24, humidity: 58, co2: 650 }
						]
					}
				},
				{
					id: 2,
					type: '环境检测',
					name: '卧室空气检测',
					image: '/static/sensors/environment.png',
					online: true,
					data: {
						pm25: { label: 'PM2.5', value: 28, unit: 'μg/m³', level: '优' },
						temperature: { label: '温度', value: 25.0, unit: '℃', level: '舒适' },
						humidity: { label: '湿度', value: 60, unit: '%', level: '良好' },
						co2: { label: 'CO2', value: 650, unit: 'ppm', level: '优' }
					}
				},
				// 漏水检测传感器
				{
					id: 3,
					type: '漏水检测',
					name: '厨房漏水检测',
					image: '/static/sensors/water.png',
					online: true,
					alarm: false,
					data: {
						status: { label: '状态', value: '正常', unit: '', level: '安全' },
						battery: { label: '电量', value: 85, unit: '%', level: '良好' }
					}
				},
				{
					id: 4,
					type: '漏水检测',
					name: '卫生间漏水检测',
					image: '/static/sensors/water.png',
					online: true,
					alarm: true,
					data: {
						status: { label: '状态', value: '漏水警报', unit: '', level: '危险' },
						battery: { label: '电量', value: 75, unit: '%', level: '良好' }
					}
				},
				// 门锁传感器
				{
					id: 5,
					type: '门锁',
					name: '大门智能锁',
					image: '/static/sensors/lock.png',
					online: true,
					data: {
						status: { label: '状态', value: '已锁', unit: '', level: '安全' },
						battery: { label: '电量', value: 90, unit: '%', level: '良好' }
					},
					records: [
						{ time: '2024-03-14 08:30', action: '开门', user: '用户1' },
						{ time: '2024-03-14 08:35', action: '关门', user: '用户1' },
						{ time: '2024-03-14 18:20', action: '开门', user: '用户2' },
						{ time: '2024-03-14 18:22', action: '关门', user: '用户2' }
					]
				},
				{
					id: 6,
					type: '门锁',
					name: '卧室门锁',
					image: '/static/sensors/lock.png',
					online: true,
					alarm: true,
					data: {
						status: { label: '状态', value: '开启超时', unit: '', level: '警告' },
						battery: { label: '电量', value: 80, unit: '%', level: '良好' }
					}
				},
				// 人体检测传感器
				{
					id: 7,
					type: '人体检测',
					name: '卧室人体感应',
					image: '/static/sensors/human.png',
					online: true,
					data: {
						status: { label: '状态', value: '有人', unit: '', level: '正常' },
						battery: { label: '电量', value: 95, unit: '%', level: '良好' }
					},
					historyData: {
						daily: [
							{ time: '00:00', status: '有人' },
							{ time: '06:00', status: '有人' },
							{ time: '08:00', status: '无人' },
							{ time: '18:00', status: '有人' },
							{ time: '22:00', status: '有人' }
						]
					}
				},
				{
					id: 8,
					type: '人体检测',
					name: '客厅人体感应',
					image: '/static/sensors/human.png',
					online: true,
					data: {
						status: { label: '状态', value: '无人', unit: '', level: '正常' },
						battery: { label: '电量', value: 85, unit: '%', level: '良好' }
					}
				},
				// 烟雾检测传感器
				{
					id: 9,
					type: '烟雾检测',
					name: '厨房烟雾检测',
					image: '/static/sensors/smoke.png',
					online: true,
					data: {
						status: { label: '状态', value: '正常', unit: '', level: '安全' },
						battery: { label: '电量', value: 90, unit: '%', level: '良好' }
					}
				},
				{
					id: 10,
					type: '烟雾检测',
					name: '客厅烟雾检测',
					image: '/static/sensors/smoke.png',
					online: false,
					data: {
						status: { label: '状态', value: '离线', unit: '', level: '未知' },
						battery: { label: '电量', value: 0, unit: '%', level: '未知' }
					}
				}
			],
			filteredSensors: [], // 根据分类筛选后的传感器
			selectedSensor: null, // 当前选中的传感器
			showSensorDetail: false, // 是否显示传感器详情
			chartTimeRange: 'day', // 图表时间范围：day, week, month, year
			environmentDevices: [
				{
					id: 1,
					name: '客厅空气检测',
					online: true,
					data: {
						pm25: { label: 'PM2.5', value: 35, unit: 'μg/m³' },
						temperature: { label: '温度', value: 26.5, unit: '℃' },
						humidity: { label: '湿度', value: 65, unit: '%' },
						co2: { label: 'CO2', value: 800, unit: 'ppm' }
					}
				},
				{
					id: 2,
					name: '卧室空气检测',
					online: true,
					data: {
						pm25: { label: 'PM2.5', value: 28, unit: 'μg/m³' },
						temperature: { label: '温度', value: 25.0, unit: '℃' },
						humidity: { label: '湿度', value: 60, unit: '%' },
						co2: { label: 'CO2', value: 650, unit: 'ppm' }
					}
				},
				{
					id: 3,
					name: '书房空气检测',
					online: false,
					data: {
						pm25: { label: 'PM2.5', value: 0, unit: 'μg/m³' },
						temperature: { label: '温度', value: 0, unit: '℃' },
						humidity: { label: '湿度', value: 0, unit: '%' },
						co2: { label: 'CO2', value: 0, unit: 'ppm' }
					}
				}
			],
			switchDevices: [
				{ 
					id: 'BK-60379951C8200600F966CE20', 
					name: '智能电闸1', 
					category: 'W3RCB1',
					group: '客厅', 
					online: true, 
					on: false,
					loading: false
				},
				{ 
					id: 'BK-6E6E156AC92006007B04CF20', 
					name: '智能电闸2', 
					category: 'W3RCB1',
					group: '卧室', 
					online: true, 
					on: false,
					loading: false
				},
				{ 
					id: 'BK-1D870557C920060018D0CF20', 
					name: '智能电闸3', 
					category: 'W3RCB1',
					group: '厨房', 
					online: true, 
					on: false,
					loading: false
				},
				{ 
					id: 'BK-B1BFC6D86220060077676420', 
					name: '智能电闸4', 
					category: 'W3RCB1',
					group: '卫生间', 
					online: true, 
					on: false,
					loading: false
				},
				{ 
					id: 'BK-86359E3EC8200600180BCE20', 
					name: '智能电闸5', 
					category: 'W3RCB1',
					group: '书房', 
					online: true, 
					on: false,
					loading: false
				},
				{ 
					id: 'BK-1C640D05C92006001161CF20', 
					name: '智能电闸6', 
					category: 'W3RCB1',
					group: '阳台', 
					online: true, 
					on: false,
					loading: false
				}
			],
			switchStats: {
				total: 5,
				on: 3,
				off: 2
			},
			switchGroups: ['客厅', '卧室', '厨房', '卫生间', '书房', '阳台'],
			currentSwitchGroup: '全部',
			showSchedule: false,
			showPowerUsage: false,
			showAlarmDetails: false,
			scheduleAction: 'on',
			scheduleDate: '',
			scheduleTime: '',
			repeatOptions: ['每天', '工作日', '周末', '工作日和周末'],
			repeatIndex: 0,
			usageTimeRange: 'day',
			usageDate: '',
			selectedSwitch: null,
			showTokenError: false, // 是否显示token错误提示
			filteredDevices: [], // 过滤后的设备列表
			deviceToDelete: null, // 要删除的设备
			showDeviceModal: false, // 是否显示添加/编辑设备弹窗
			isEditMode: false, // 是否为编辑模式
			formError: '', // 表单错误信息
			deviceForm: {
				name: '', // 设备名称
				type: '', // 设备类型
				deviceId: '', // 设备ID
				location: '', // 位置信息
			},
			showDeleteModal: false, // 是否显示删除设备弹窗
			showTypeSelector: false, // 是否显示类型选择器弹窗
			currentFilter: 'all', // 当前筛选条件
			devices: [],
		}
	},
	computed: {
		// 根据当前类型和组过滤开关设备
		filteredSwitches() {
			if (this.currentSwitchGroup === '全部') {
				return this.switchDevices
			} else {
				return this.switchDevices.filter(device => device.group === this.currentSwitchGroup)
			}
		},
		
		// 已开启的电闸
		filteredOnSwitches() {
			return this.filteredSwitches.filter(device => device.on === true)
		},
		
		// 已关闭的电闸
		filteredOffSwitches() {
			return this.filteredSwitches.filter(device => device.on === false)
		},
		// 所有报警的电闸
		alarmSwitches() {
			return this.switchDevices.filter(device => device.hasWarning)
		},
		// 电闸统计数据
		switchStats() {
			const total = this.switchDevices.length;
			const online = this.switchDevices.filter(device => device.online).length;
			const warning = this.switchDevices.filter(device => device.online && device.on).length;
			
			return {
				total,
				on: online,
				off: total - online,
				warning
			};
		}
	},
	methods: {
		switchDeviceType(typeId) {
			this.currentType = typeId
			this.currentTypeIndex = this.deviceTypes.findIndex(type => type.id === typeId)
		},
		handleSwiperChange(e) {
			const index = e.detail.current
			this.currentType = this.deviceTypes[index].id
		},
		togglePower(device) {
			device.on = !device.on
			
			if (device.on) {
				uni.showToast({
					title: `${device.name}已开启`,
					icon: 'none'
				})
				
				// 开启后恢复之前的功率值
				if (device.id === 'sw001') {
					device.currentPower = 1450
				} else if (device.id === 'sw003') {
					device.currentPower = 2150
				} else if (device.id === 'sw004') {
					device.currentPower = 850
				} else if (device.id === 'sw006') {
					device.currentPower = 560
				} else if (device.id === 'sw008') {
					device.currentPower = 320
				}
			} else {
				uni.showToast({
					title: `${device.name}已关闭`,
					icon: 'none'
				})
				
				// 关闭后功率为0
				device.currentPower = 0
			}
		},
		// 处理传感器分类变化
		handleCategoryChange(e) {
			const index = e.detail.value
			this.currentCategory = this.sensorCategories[index]
			this.filterSensors()
		},
		// 根据分类筛选传感器
		filterSensors() {
			if (this.currentCategory === '全部') {
				this.filteredSensors = this.allSensors
			} else {
				this.filteredSensors = this.allSensors.filter(sensor => sensor.type === this.currentCategory)
			}
		},
		// 查看传感器详情
		viewSensorDetail(sensor) {
			this.selectedSensor = sensor
			this.showSensorDetail = true
		},
		// 关闭传感器详情
		closeSensorDetail() {
			this.showSensorDetail = false
			this.selectedSensor = null
		},
		// 切换图表时间范围
		switchChartTimeRange(range) {
			this.chartTimeRange = range
		},
		// 获取传感器状态样式类
		getSensorStatusClass(sensor) {
			if (!sensor.online) return 'offline'
			if (sensor.alarm) return 'alarm'
			return 'online'
		},
		// 获取传感器数据等级样式类
		getDataLevelClass(level) {
			switch (level) {
				case '优': return 'level-excellent'
				case '良好': return 'level-good'
				case '正常': return 'level-normal'
				case '舒适': return 'level-comfort'
				case '安全': return 'level-safe'
				case '警告': return 'level-warning'
				case '危险': return 'level-danger'
				default: return ''
			}
		},
		// 切换传感器电源
		toggleSensorPower(sensor) {
			sensor.online = !sensor.online
			if (!sensor.online) {
				// 设备离线后，清除警报状态
				sensor.alarm = false
				
				// 更新数据
				if (sensor.type === '环境检测') {
					Object.keys(sensor.data).forEach(key => {
						sensor.data[key].value = 0
						sensor.data[key].level = '未知'
					})
				} else {
					sensor.data.status.value = '离线'
					sensor.data.status.level = '未知'
					sensor.data.battery.value = 0
					sensor.data.battery.level = '未知'
				}
			} else {
				// 设备重新上线，恢复默认值
				this.resetSensorData(sensor)
			}
			
			uni.showToast({
				title: `${sensor.name}已${sensor.online ? '开启' : '关闭'}`,
				icon: 'none'
			})
		},
		
		// 重置传感器数据
		resetSensorData(sensor) {
			// 根据传感器类型重置数据
			switch(sensor.type) {
				case '环境检测':
					sensor.data.pm25.value = 30
					sensor.data.pm25.level = '良好'
					sensor.data.temperature.value = 25
					sensor.data.temperature.level = '舒适'
					sensor.data.humidity.value = 60
					sensor.data.humidity.level = '良好'
					sensor.data.co2.value = 700
					sensor.data.co2.level = '正常'
					break
				case '漏水检测':
					sensor.data.status.value = '正常'
					sensor.data.status.level = '安全'
					sensor.data.battery.value = 80
					sensor.data.battery.level = '良好'
					break
				case '门锁':
					sensor.data.status.value = '已锁'
					sensor.data.status.level = '安全'
					sensor.data.battery.value = 85
					sensor.data.battery.level = '良好'
					break
				case '人体检测':
					sensor.data.status.value = '无人'
					sensor.data.status.level = '正常'
					sensor.data.battery.value = 90
					sensor.data.battery.level = '良好'
					break
				case '烟雾检测':
					sensor.data.status.value = '正常'
					sensor.data.status.level = '安全'
					sensor.data.battery.value = 85
					sensor.data.battery.level = '良好'
					break
			}
		},
		
		// 处理传感器报警
		handleAlarm(sensor) {
			if (sensor.alarm) {
				// 显示警报通知
				uni.showModal({
					title: '设备警报',
					content: `${sensor.name}发出警报: ${sensor.data.status.value}`,
					confirmText: '查看详情',
					cancelText: '知道了',
					success: (res) => {
						if (res.confirm) {
							this.viewSensorDetail(sensor)
						}
					}
				})
				
				// 播放警报声音
				// TODO: 实现警报声音
			}
		},
		showScheduleModal(device) {
			this.selectedSwitch = device
			this.showSchedule = true
		},
		closeScheduleModal() {
			this.showSchedule = false
			this.selectedSwitch = null
		},
		handleScheduleActionChange(e) {
			this.scheduleAction = e.detail.value
		},
		handleScheduleDateChange(e) {
			this.scheduleDate = e.detail.value
		},
		handleScheduleTimeChange(e) {
			this.scheduleTime = e.detail.value
		},
		handleRepeatChange(e) {
			this.repeatIndex = e.detail.value
		},
		saveSchedule() {
			// TODO: 实现保存定时设置的逻辑
			this.closeScheduleModal()
		},
		switchUsageTimeRange(range) {
			this.usageTimeRange = range
		},
		handleUsageDateChange() {
			// TODO: 实现日期选择逻辑
		},
		viewPowerUsage(device) {
			this.selectedSwitch = device
			this.showPowerUsage = true
		},
		closePowerUsageModal() {
			this.showPowerUsage = false
			this.selectedSwitch = null
		},
		viewAlarmDetails(device) {
			this.selectedSwitch = device
			this.showAlarmDetails = true
		},
		closeAlarmDetailsModal() {
			this.showAlarmDetails = false
			this.selectedSwitch = null
		},
		// 批量控制所有电闸
		controlAllSwitches(action) {
			const devices = this.filteredSwitches.filter(device => device.online)
			devices.forEach(device => {
				device.on = action
				
				if (action) {
					// 开启后恢复之前的功率值
					if (device.id === 'sw001') {
						device.currentPower = 1450
					} else if (device.id === 'sw003') {
						device.currentPower = 2150
					} else if (device.id === 'sw004') {
						device.currentPower = 850
					} else if (device.id === 'sw006') {
						device.currentPower = 560
					} else if (device.id === 'sw008') {
						device.currentPower = 320
					}
				} else {
					// 关闭后功率为0
					device.currentPower = 0
				}
			})
			
			uni.showToast({
				title: `已${action ? '开启' : '关闭'}所有电闸`,
				icon: 'none'
			})
		},
		// 切换开关分组
		handleSwitchGroupChange(e) {
			const index = e.detail.value
			if (index === '0') {
				this.currentSwitchGroup = '全部'
			} else {
				this.currentSwitchGroup = this.switchGroups[index - 1]
			}
		},
		// 控制电闸开关
		async toggleSwitch(device) {
			if (!device.online || device.loading) return;
			
			try {
				device.loading = true;
				
				// 显示操作提示
				uni.showLoading({
					title: device.on ? '正在关闭...' : '正在开启...'
				});
				
				// 调用第三方API控制电闸
				const targetState = device.on ? 0 : 1;
				console.log(`尝试控制设备 ${device.id}，状态: ${targetState}`);
				
				const res = await thirdPartyApi.controlDevice(device.id, targetState);
				
				console.log('控制结果:', res);
				
				// 确保res存在，且有statusCode属性
				if (res && (res.statusCode === 200 || res.statusCode === 201)) {
					// 更新状态
					device.on = !device.on;
					
					// 隐藏加载提示
					uni.hideLoading();
					uni.showToast({
						title: device.on ? '已开启' : '已关闭',
						icon: 'none'
					});
					
					// 更新统计数据
					this.updateSwitchStats();
				} else {
					// 状态码不正确，提示控制失败
					uni.hideLoading();
					uni.showToast({
						title: '控制失败，服务器响应异常',
						icon: 'none'
					});
					console.error('控制电闸状态码异常:', res);
				}
			} catch (error) {
				console.error('控制电闸失败:', error);
				uni.hideLoading();
				uni.showToast({
					title: '控制失败，请稍后再试',
					icon: 'none',
					duration: 2000
				});
			} finally {
				device.loading = false;
			}
		},
		
		// 批量控制所有电闸
		async controlAllSwitches(turnOn) {
			// 过滤出可以操作的设备（在线且状态与目标状态不同）
			const devices = this.filteredSwitches.filter(device => device.online && device.on !== turnOn);
			
			if (devices.length === 0) {
				uni.showToast({
					title: turnOn ? '没有可开启的电闸' : '没有可关闭的电闸',
					icon: 'none'
				});
				return;
			}
			
			try {
				// 显示批量操作提示
				uni.showLoading({
					title: turnOn ? '正在批量开启...' : '正在批量关闭...'
				});
				
				console.log(`开始批量${turnOn ? '开启' : '关闭'}，设备数量:`, devices.length);
				
				// 批量处理，使用Promise.all并行处理
				// 注意：为防止服务器过载，可以考虑限制并发请求数量
				const promises = devices.map(async (device) => {
					device.loading = true;
					try {
						const targetState = turnOn ? 1 : 0;
						console.log(`控制设备 ${device.id} 状态:${targetState}`);
						
						const res = await thirdPartyApi.controlDevice(device.id, targetState);
						
						// 确保res存在，且有statusCode属性
						if (res && (res.statusCode === 200 || res.statusCode === 201)) {
							device.on = turnOn;
							return true;
						} else {
							console.error(`控制设备 ${device.id} 失败，状态码:`, res && res.statusCode);
							return false;
						}
					} catch (error) {
						console.error(`控制电闸 ${device.id} 失败:`, error);
						return false;
					} finally {
						device.loading = false;
					}
				});
				
				// 等待所有请求完成
				const results = await Promise.all(promises);
				const successCount = results.filter(result => result).length;
				const failCount = results.length - successCount;
				
				// 更新统计数据
				this.updateSwitchStats();
				
				// 隐藏加载提示
				uni.hideLoading();
				
				// 显示操作结果
				if (successCount > 0) {
					uni.showToast({
						title: `成功${turnOn ? '开启' : '关闭'}${successCount}个电闸${failCount > 0 ? `，${failCount}个失败` : ''}`,
						icon: 'none',
						duration: 2000
					});
				} else {
					uni.showToast({
						title: '操作失败，所有设备控制均未成功',
						icon: 'none',
						duration: 2000
					});
				}
			} catch (error) {
				console.error('批量控制失败:', error);
				uni.hideLoading();
				uni.showToast({
					title: '操作失败，请稍后再试',
					icon: 'none',
					duration: 2000
				});
			}
		},
		// 加载电闸状态
		async loadSwitchStatus() {
			try {
				uni.showLoading({
					title: '加载中...'
				});
				
				console.log('开始加载电闸状态');
				
				// 由于可能没有token，我们使用一个简单的延迟来模拟加载
				// 在实际情况下，这里应该调用API获取设备的真实状态
				await new Promise(resolve => setTimeout(resolve, 800));
				
				// 更新一些演示数据
				// 在实际项目中，这里应该通过API获取真实设备状态
				const demoStatus = {
					'BK-60379951C8200600F966CE20': { online: true, on: Math.random() > 0.5 },
					'BK-6E6E156AC92006007B04CF20': { online: true, on: Math.random() > 0.5 },
					'BK-1D870557C920060018D0CF20': { online: true, on: Math.random() > 0.5 },
					'BK-B1BFC6D86220060077676420': { online: true, on: Math.random() > 0.5 },
					'BK-86359E3EC8200600180BCE20': { online: true, on: Math.random() > 0.5 },
					'BK-1C640D05C92006001161CF20': { online: true, on: Math.random() > 0.5 }
				};
				
				// 更新设备状态
				this.switchDevices.forEach(device => {
					if (demoStatus[device.id]) {
						device.online = demoStatus[device.id].online;
						device.on = demoStatus[device.id].on;
					}
				});
				
				// 更新电闸统计数据
				this.updateSwitchStats();
				
				console.log('电闸状态加载完成', this.switchDevices);
				
				uni.hideLoading();
			} catch (error) {
				console.error('加载电闸状态失败:', error);
				uni.hideLoading();
				uni.showToast({
					title: '加载设备状态失败',
					icon: 'none'
				});
			}
		},
		
		// 添加一个更新电闸统计数据的方法
		updateSwitchStats() {
			const total = this.switchDevices.length;
			const online = this.switchDevices.filter(device => device.online).length;
			const on = this.switchDevices.filter(device => device.on).length;
			
			this.switchStats = {
				total,
				on,
				off: total - on,
				warning: Math.floor(Math.random() * 3) // 随机告警数量，实际项目应该从API获取
			};
		},
		// 检查token状态
		checkTokenStatus() {
			const accessToken = uni.getStorageSync('access_token');
			if (!accessToken) {
				console.log('未检测到access_token，显示提示');
				this.showTokenError = true;
			}
		},
		
		// 关闭token提示
		closeTokenHint() {
			this.showTokenError = false;
		},
		
		// 重新登录
		reLogin() {
			uni.showModal({
				title: '重新登录',
				content: '是否返回登录页面进行重新授权？',
				success: (res) => {
					if (res.confirm) {
						// 清除现有token
						uni.removeStorageSync('token');
						uni.removeStorageSync('access_token');
						
						// 跳转到登录页
						uni.reLaunch({
							url: '/pages/login/login'
						});
					}
				}
			});
		},
		openDeviceLogs() {
			// 实现设备日志入口的逻辑
			console.log('打开设备日志');
		},
		openAddDeviceModal() {
			this.showDeviceModal = true;
			this.isEditMode = false;
			this.deviceForm = {
				name: '',
				type: '',
				deviceId: '',
				location: '',
			};
		},
		openEditDeviceModal(device) {
			this.showDeviceModal = true;
			this.isEditMode = true;
			this.deviceForm = {
				name: device.name,
				type: device.type,
				deviceId: device.id,
				location: device.location,
			};
		},
		openDeleteDeviceModal(device) {
			this.deviceToDelete = device;
			this.showDeleteModal = true;
		},
		closeDeviceModal() {
			this.showDeviceModal = false;
			this.deviceToDelete = null;
		},
		submitDeviceForm() {
			// 表单验证逻辑
			if (!this.deviceForm.name || !this.deviceForm.type || !this.deviceForm.deviceId) {
				this.formError = '请填写完整信息';
				return;
			}
			// 提交表单逻辑
			console.log('提交设备信息:', this.deviceForm);
			this.closeDeviceModal();
		},
		filterDevices(filter) {
			this.currentFilter = filter;
			// 根据筛选条件过滤设备
			this.filteredDevices = this.deviceTypes.filter(device => {
				switch (filter) {
					case 'all': return true;
					case 'online': return device.status === 'online';
					case 'offline': return device.status === 'offline';
					case 'alert': return device.status === 'alert';
					default: return device.type === filter;
				}
			});
		},
		openDeviceDetails(device) {
			// 实现设备详情入口的逻辑
			console.log('打开设备详情:', device);
		},
		selectDeviceType(type) {
			this.deviceForm.type = type;
			this.showTypeSelector = false;
		},
		getDeviceTypeName(type) {
			return this.deviceTypes.find(t => t.id === type)?.name || '未知';
		},
		formatDate(date) {
			return new Date(date).toLocaleString();
		},
		async loadDevices() {
			try {
				uni.showLoading({ title: '加载中...' });
				const res = await deviceApi.getDeviceList();
				uni.hideLoading();
				if (res && res.data && res.data.success) {
					this.devices = res.data.result.records || res.data.result || [];
					console.log('设备数据:', this.devices);
				} else {
					this.devices = [];
					uni.showToast({ title: res?.data?.message || '获取设备失败', icon: 'none' });
				}
			} catch (e) {
				uni.hideLoading();
				this.devices = [];
				uni.showToast({ title: '接口异常', icon: 'none' });
			}
		},
	},
	onLoad() {
		// 初始化筛选的传感器
		this.filterSensors();
		
		// 检查token状态
		this.checkTokenStatus();
	},
	
	// 添加onShow生命周期函数，每次页面显示都加载电闸状态
	onShow() {
		// 加载电闸状态
		this.loadSwitchStatus();
	},
}
</script>

<style lang="scss" scoped>
.control-container {
	padding: 20rpx;
	background: #f5f5f5;
	min-height: 100vh;

	.status-overview {
		display: flex;
		justify-content: space-around;
		
		.status-item {
			display: flex;
			flex-direction: column;
			align-items: center;

			.status-title {
				font-size: 24rpx;
				color: #666;
				margin-bottom: 10rpx;
			}

			.status-value {
				font-size: 36rpx;
				font-weight: bold;
				color: #333;

				&.online {
					color: #07c160;
				}

				&.warning {
					color: #ff4d4f;
				}
			}
		}

		.status-divider {
			width: 2rpx;
			height: 50rpx;
			background: #eee;
		}
	}

	.filter-dropdown {
		background: #fff;
		border-radius: 20rpx;
		padding: 15rpx 30rpx;
		margin-bottom: 20rpx;
		
		.picker-container {
			display: flex;
			align-items: center;
			
			.picker-label {
				font-size: 28rpx;
				color: #666;
			}
			
			.picker-value {
				flex: 1;
				font-size: 28rpx;
				color: #333;
				margin-left: 10rpx;
			}
			
			.picker-arrow {
				font-size: 24rpx;
				color: #999;
			}
		}
	}

	.device-types {
		white-space: nowrap;
		padding: 20rpx 0;
		margin-bottom: 20rpx;

		.type-item {
			display: inline-block;
			padding: 15rpx 40rpx;
			margin-right: 20rpx;
			background: #fff;
			border-radius: 30rpx;
			font-size: 28rpx;
			color: #666;

			&.active {
				background: #007AFF;
				color: #fff;
			}

			&:last-child {
				margin-right: 0;
			}
		}
	}

	.device-list-container {
		height: calc(100vh - 350rpx);

		.device-list {
			height: 100%;
			padding: 10rpx 0;
			
			// 电闸状态概览
			.switch-overview {
				display: flex;
				justify-content: space-around;
				align-items: center;
				background: #fff;
				padding: 30rpx;
				border-radius: 20rpx;
				margin-bottom: 20rpx;
				
				.status-item {
					display: flex;
					flex-direction: column;
					align-items: center;
					
					.status-title {
						font-size: 24rpx;
						color: #666;
						margin-bottom: 10rpx;
					}
					
					.status-value {
						font-size: 36rpx;
						font-weight: bold;
						color: #333;
						
						&.online {
							color: #07c160;
						}
						
						&.warning {
							color: #ff4d4f;
						}
					}
				}
				
				.status-divider {
					width: 2rpx;
					height: 50rpx;
					background: #eee;
				}
			}
			
			// 批量控制按钮
			.batch-control {
				display: flex;
				justify-content: space-between;
				margin-bottom: 20rpx;
				
				button {
					flex: 1;
					margin: 0 10rpx;
					height: 80rpx;
					line-height: 80rpx;
					font-size: 28rpx;
					border-radius: 40rpx;
					
					&.all-on {
						background: #07c160;
						color: #fff;
					}
					
					&.all-off {
						background: #ff4d4f;
						color: #fff;
					}
					
					&:first-child {
						margin-left: 0;
					}
					
					&:last-child {
						margin-right: 0;
					}
				}
			}
			
			// 分区标题
			.section-title {
				font-size: 30rpx;
				font-weight: bold;
				margin: 30rpx 0 20rpx;
				padding-left: 20rpx;
				border-left: 8rpx solid #007AFF;
			}

			// 传感器列表
			.sensor-list {
				.sensor-card {
					background: #fff;
					border-radius: 20rpx;
					padding: 30rpx;
					margin-bottom: 20rpx;
					
					.sensor-header {
						display: flex;
						align-items: center;
						margin-bottom: 20rpx;
						
						.sensor-image {
							width: 80rpx;
							height: 80rpx;
							margin-right: 20rpx;
						}
						
						.sensor-info {
							flex: 1;
							
							.sensor-name {
								font-size: 32rpx;
								font-weight: bold;
								display: block;
								margin-bottom: 5rpx;
							}
							
							.sensor-type {
								font-size: 24rpx;
								color: #666;
							}
						}
						
						.sensor-status {
							font-size: 24rpx;
							padding: 4rpx 15rpx;
							border-radius: 20rpx;
							
							&.online {
								background: #e8f5e9;
								color: #07c160;
							}
							
							&.offline {
								background: #f5f5f5;
								color: #999;
							}
							
							&.alarm {
								background: #fff1f0;
								color: #ff4d4f;
							}
						}
					}
					
					.sensor-data {
						display: flex;
						flex-wrap: wrap;
						gap: 20rpx;
						
						.data-item {
							flex: 1;
							min-width: 200rpx;
							background: #f8f8f8;
							padding: 20rpx;
							border-radius: 15rpx;
							
							.data-label {
								font-size: 24rpx;
								color: #666;
								margin-bottom: 10rpx;
								display: block;
							}
							
							.data-value-container {
								display: flex;
								align-items: center;
								
								.data-value {
									font-size: 32rpx;
									font-weight: bold;
									color: #333;
								}
								
								.data-unit {
									font-size: 24rpx;
									color: #999;
									margin-left: 5rpx;
								}
								
								.data-level {
									margin-left: auto;
									font-size: 24rpx;
									padding: 2rpx 10rpx;
									border-radius: 10rpx;
									
									&.level-excellent {
										background: #e6f7ff;
										color: #1890ff;
									}
									
									&.level-good {
										background: #e8f5e9;
										color: #07c160;
									}
									
									&.level-normal {
										background: #f6ffed;
										color: #52c41a;
									}
									
									&.level-comfort {
										background: #e6f7ff;
										color: #1890ff;
									}
									
									&.level-safe {
										background: #e8f5e9;
										color: #07c160;
									}
									
									&.level-warning {
										background: #fff7e6;
										color: #faad14;
									}
									
									&.level-danger {
										background: #fff1f0;
										color: #ff4d4f;
									}
								}
							}
						}
					}
				}
			}
			
			// 传感器详情
			.sensor-detail {
				.detail-header {
					display: flex;
					align-items: center;
					padding: 30rpx;
					background: #fff;
					border-radius: 20rpx;
					margin-bottom: 20rpx;
					
					.back-button {
						display: flex;
						align-items: center;
						margin-right: 20rpx;
						
						.back-icon {
							font-size: 36rpx;
							color: #007AFF;
							margin-right: 5rpx;
						}
						
						.back-text {
							font-size: 28rpx;
							color: #007AFF;
						}
					}
					
					.detail-title {
						flex: 1;
						text-align: center;
						font-size: 36rpx;
						font-weight: bold;
					}
				}
				
				.detail-info {
					display: flex;
					align-items: center;
					padding: 30rpx;
					background: #fff;
					border-radius: 20rpx;
					margin-bottom: 20rpx;
					
					.detail-image {
						width: 120rpx;
						height: 120rpx;
						margin-right: 30rpx;
					}
					
					.detail-basic {
						flex: 1;
						
						.detail-name {
							font-size: 36rpx;
							font-weight: bold;
							margin-bottom: 10rpx;
							display: block;
						}
						
						.detail-type {
							font-size: 28rpx;
							color: #666;
							margin-bottom: 10rpx;
							display: block;
						}
						
						.detail-status {
							display: inline-block;
							font-size: 26rpx;
							padding: 4rpx 20rpx;
							border-radius: 20rpx;
							
							&.online {
								background: #e8f5e9;
								color: #07c160;
							}
							
							&.offline {
								background: #f5f5f5;
								color: #999;
							}
							
							&.alarm {
								background: #fff1f0;
								color: #ff4d4f;
							}
						}
					}
				}
				
				.detail-data {
					display: flex;
					flex-wrap: wrap;
					gap: 20rpx;
					padding: 30rpx;
					background: #fff;
					border-radius: 20rpx;
					margin-bottom: 20rpx;
					
					.data-item {
						flex: 1;
						min-width: 300rpx;
						background: #f8f8f8;
						padding: 20rpx;
						border-radius: 15rpx;
						
						.data-label {
							font-size: 28rpx;
							color: #666;
							margin-bottom: 10rpx;
							display: block;
						}
						
						.data-value-container {
							display: flex;
							align-items: center;
							
							.data-value {
								font-size: 36rpx;
								font-weight: bold;
								color: #333;
							}
							
							.data-unit {
								font-size: 28rpx;
								color: #999;
								margin-left: 5rpx;
							}
							
							.data-level {
								margin-left: auto;
								font-size: 26rpx;
								padding: 4rpx 15rpx;
								border-radius: 10rpx;
								
								&.level-excellent {
									background: #e6f7ff;
									color: #1890ff;
								}
								
								&.level-good {
									background: #e8f5e9;
									color: #07c160;
								}
								
								&.level-normal {
									background: #f6ffed;
									color: #52c41a;
								}
								
								&.level-comfort {
									background: #e6f7ff;
									color: #1890ff;
								}
								
								&.level-safe {
									background: #e8f5e9;
									color: #07c160;
								}
								
								&.level-warning {
									background: #fff7e6;
									color: #faad14;
								}
								
								&.level-danger {
									background: #fff1f0;
									color: #ff4d4f;
								}
							}
						}
					}
				}
				
				.chart-container {
					padding: 30rpx;
					background: #fff;
					border-radius: 20rpx;
					margin-bottom: 20rpx;
					
					.chart-header {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 20rpx;
						
						.chart-title {
							font-size: 32rpx;
							font-weight: bold;
						}
						
						.time-range-tabs {
							display: flex;
							
							.time-range-tab {
								padding: 10rpx 20rpx;
								font-size: 28rpx;
								color: #666;
								border-radius: 10rpx;
								margin-left: 10rpx;
								
								&.active {
									background: #007AFF;
									color: #fff;
								}
							}
						}
					}
					
					.chart-placeholder {
						height: 400rpx;
						background: #f8f8f8;
						display: flex;
						justify-content: center;
						align-items: center;
						border-radius: 15rpx;
						
						.chart-note {
							font-size: 28rpx;
							color: #999;
						}
					}
				}
				
				.records-container {
					padding: 30rpx;
					background: #fff;
					border-radius: 20rpx;
					margin-bottom: 20rpx;
					
					.records-title {
						font-size: 32rpx;
						font-weight: bold;
						margin-bottom: 20rpx;
						display: block;
					}
					
					.record-list {
						.record-item {
							display: flex;
							padding: 20rpx 0;
							border-bottom: 1rpx solid #eee;
							
							&:last-child {
								border-bottom: none;
							}
							
							.record-time {
								flex: 2;
								font-size: 28rpx;
								color: #666;
							}
							
							.record-action {
								flex: 1;
								font-size: 28rpx;
								color: #333;
							}
							
							.record-user {
								flex: 1;
								font-size: 28rpx;
								color: #666;
								text-align: right;
							}
						}
					}
				}
				
				.presence-container {
					padding: 30rpx;
					background: #fff;
					border-radius: 20rpx;
					margin-bottom: 20rpx;
					
					.presence-title {
						font-size: 32rpx;
						font-weight: bold;
						margin-bottom: 20rpx;
						display: block;
					}
					
					.presence-timeline {
						.timeline-item {
							display: flex;
							padding: 20rpx 0;
							border-bottom: 1rpx solid #eee;
							
							&:last-child {
								border-bottom: none;
							}
							
							.timeline-time {
								flex: 1;
								font-size: 28rpx;
								color: #666;
							}
							
							.timeline-status {
								flex: 1;
								font-size: 28rpx;
								text-align: right;
								
								&.present {
									color: #07c160;
								}
								
								&.absent {
									color: #999;
								}
							}
						}
					}
				}
				
				.detail-control {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 30rpx;
					background: #fff;
					border-radius: 20rpx;
					
					.control-title {
						font-size: 32rpx;
						font-weight: bold;
					}
				}
			}

			.device-card {
				background: #fff;
				border-radius: 20rpx;
				padding: 30rpx;
				margin-bottom: 20rpx;

				.device-header {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 20rpx;

					.device-title {
						.device-name {
							font-size: 32rpx;
							font-weight: bold;
						}
						
						.device-group {
							font-size: 24rpx;
							color: #666;
							margin-left: 10rpx;
						}
					}

					.device-status {
						font-size: 24rpx;
						padding: 4rpx 15rpx;
						border-radius: 20rpx;

						&.online {
							background: #e8f5e9;
							color: #07c160;
						}

						&.offline {
							background: #f5f5f5;
							color: #999;
						}
					}
				}

				.device-data {
					display: flex;
					flex-wrap: wrap;
					gap: 20rpx;

					.data-item {
						flex: 1;
						min-width: 200rpx;
						background: #f8f8f8;
						padding: 20rpx;
						border-radius: 15rpx;

						.data-label {
							font-size: 24rpx;
							color: #666;
							margin-bottom: 10rpx;
							display: block;
						}

						.data-value {
							.value {
								font-size: 32rpx;
								font-weight: bold;
								color: #333;
							}

							.unit {
								font-size: 24rpx;
								color: #999;
								margin-left: 5rpx;
							}
						}
					}
				}

				.device-control {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 20rpx;

					.power-status {
						.status-label {
							font-size: 24rpx;
							color: #666;
							margin-right: 10rpx;
						}

						.status-value {
							font-size: 28rpx;
							color: #333;
						}

						.warning-text {
							font-size: 24rpx;
							color: #ff4d4f;
							margin-left: 20rpx;
						}
					}
				}

				.power-info {
					margin-top: 20rpx;
					padding-top: 20rpx;
					border-top: 1rpx solid #eee;
					margin-bottom: 20rpx;
					
					.info-row {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 10rpx;
						
						&:last-child {
							margin-bottom: 0;
						}
					
						.info-label {
							font-size: 24rpx;
							color: #666;
						}
	
						.info-value {
							font-size: 28rpx;
							color: #333;
	
							&.warning {
								color: #ff4d4f;
								font-weight: bold;
							}
						}
					}
				}
				
				.device-actions {
					display: flex;
					margin-top: 20rpx;
					padding-top: 20rpx;
					border-top: 1rpx solid #eee;
					
					.action-item {
						flex: 1;
						text-align: center;
						font-size: 28rpx;
						color: #007AFF;
						padding: 10rpx 0;
						
						&.danger {
							color: #ff4d4f;
						}
					}
				}
			}
			
			// 弹窗样式
			.modal {
				position: fixed;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				z-index: 999;
				
				.modal-mask {
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					background: rgba(0,0,0,0.5);
				}
				
				.modal-content {
					position: absolute;
					left: 50rpx;
					right: 50rpx;
					top: 50%;
					transform: translateY(-50%);
					background: #fff;
					border-radius: 20rpx;
					overflow: hidden;
					max-height: 80vh;
					
					&.usage-modal,
					&.alarm-modal {
						height: 80vh;
						
						.modal-body {
							overflow-y: auto;
							max-height: calc(80vh - 180rpx);
						}
					}
					
					.modal-header {
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 30rpx;
						border-bottom: 1rpx solid #eee;
						
						.modal-title {
							font-size: 32rpx;
							font-weight: bold;
						}
						
						.modal-close {
							font-size: 40rpx;
							color: #999;
							line-height: 1;
						}
					}
					
					.modal-body {
						padding: 30rpx;
						
						.form-item {
							margin-bottom: 30rpx;
							
							.form-label {
								font-size: 28rpx;
								color: #333;
								margin-bottom: 15rpx;
								display: block;
							}
							
							.radio-item {
								margin-right: 30rpx;
								font-size: 28rpx;
							}
							
							.picker-box {
								height: 80rpx;
								line-height: 80rpx;
								border: 1rpx solid #eee;
								border-radius: 10rpx;
								padding: 0 20rpx;
								font-size: 28rpx;
							}
						}
						
						.usage-tabs {
							display: flex;
							border-bottom: 1rpx solid #eee;
							margin-bottom: 20rpx;
							
							.usage-tab {
								flex: 1;
								text-align: center;
								padding: 20rpx 0;
								font-size: 28rpx;
								color: #666;
								position: relative;
								
								&.active {
									color: #007AFF;
									
									&::after {
										content: '';
										position: absolute;
										bottom: 0;
										left: 50%;
										transform: translateX(-50%);
										width: 40rpx;
										height: 4rpx;
										background: #007AFF;
									}
								}
							}
						}
						
						.usage-chart {
							height: 400rpx;
							background: #f8f8f8;
							display: flex;
							justify-content: center;
							align-items: center;
							border-radius: 15rpx;
							margin-bottom: 20rpx;
							
							.chart-note {
								font-size: 28rpx;
								color: #999;
							}
						}
						
						.usage-stats {
							display: flex;
							margin-bottom: 20rpx;
							
							.stats-item {
								flex: 1;
								text-align: center;
								padding: 20rpx 0;
								
								.stats-label {
									font-size: 24rpx;
									color: #666;
									margin-bottom: 10rpx;
									display: block;
								}
								
								.stats-value {
									font-size: 32rpx;
									font-weight: bold;
									color: #333;
								}
							}
						}
						
						.date-picker {
							margin-top: 20rpx;
							
							.date-picker-label {
								font-size: 28rpx;
								color: #333;
								margin-bottom: 15rpx;
								display: block;
							}
							
							.picker-box {
								height: 80rpx;
								line-height: 80rpx;
								border: 1rpx solid #eee;
								border-radius: 10rpx;
								padding: 0 20rpx;
								font-size: 28rpx;
							}
						}
						
						.alarm-current {
							margin-bottom: 30rpx;
							
							.alarm-title {
								font-size: 32rpx;
								font-weight: bold;
								margin-bottom: 20rpx;
							}
							
							.alarm-info {
								background: #f8f8f8;
								border-radius: 15rpx;
								padding: 20rpx;
								margin-bottom: 20rpx;
								
								.alarm-row {
									display: flex;
									margin-bottom: 15rpx;
									
									&:last-child {
										margin-bottom: 0;
									}
									
									.alarm-label {
										width: 180rpx;
										font-size: 28rpx;
										color: #666;
									}
									
									.alarm-value {
										flex: 1;
										font-size: 28rpx;
										color: #333;
										
										&.danger {
											color: #ff4d4f;
										}
									}
								}
							}
							
							.alarm-status {
								display: flex;
								background: #fff7e6;
								border-radius: 15rpx;
								padding: 20rpx;
								
								.status-item {
									flex: 1;
									text-align: center;
									
									.status-label {
										font-size: 24rpx;
										color: #666;
										margin-bottom: 10rpx;
										display: block;
									}
									
									.status-value {
										font-size: 32rpx;
										font-weight: bold;
										color: #333;
										
										&.warning {
											color: #ff4d4f;
										}
									}
								}
							}
						}
						
						.alarm-history {
							.alarm-title {
								font-size: 32rpx;
								font-weight: bold;
								margin-bottom: 20rpx;
							}
							
							.alarm-list {
								.no-data {
									text-align: center;
									color: #999;
									padding: 30rpx 0;
								}
								
								.alarm-item {
									background: #f8f8f8;
									border-radius: 15rpx;
									padding: 20rpx;
									margin-bottom: 15rpx;
									
									.alarm-item-header {
										display: flex;
										justify-content: space-between;
										margin-bottom: 10rpx;
										
										.alarm-item-time {
											font-size: 24rpx;
											color: #666;
										}
										
										.alarm-item-type {
											font-size: 24rpx;
											padding: 0 10rpx;
											border-radius: 10rpx;
											
											&.high {
												background: #fff1f0;
												color: #ff4d4f;
											}
											
											&.medium {
												background: #fff7e6;
												color: #faad14;
											}
											
											&.low {
												background: #f6ffed;
												color: #52c41a;
											}
										}
									}
									
									.alarm-item-content {
										font-size: 28rpx;
										color: #333;
									}
								}
							}
						}
					}
					
					.modal-footer {
						display: flex;
						border-top: 1rpx solid #eee;
						
						.modal-btn {
							flex: 1;
							height: 90rpx;
							line-height: 90rpx;
							text-align: center;
							font-size: 32rpx;
							
							&.cancel {
								color: #666;
								background: #f5f5f5;
							}
							
							&.confirm {
								color: #fff;
								background: #007AFF;
							}
						}
					}
				}
			}
		}
	}
}

// 智能电闸样式
.device-image {
  width: 80rpx;
  height: 80rpx;
  margin-right: 20rpx;
  
  image {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}

.device-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  
  .device-type {
    font-size: 26rpx;
    color: #666;
    margin-bottom: 5rpx;
  }
  
  .device-id {
    font-size: 22rpx;
    color: #999;
  }
}

.switch-button {
  margin-left: 20rpx;
}

.device-control {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
}

.token-error-hint {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 999;
	display: flex;
	justify-content: center;
	align-items: center;

	.hint-content {
		background: #fff;
		padding: 30rpx;
		border-radius: 20rpx;
		text-align: center;

		.hint-text {
			font-size: 28rpx;
			color: #666;
			margin-bottom: 20rpx;
		}

		.hint-btn {
			background: #007AFF;
			color: #fff;
			padding: 10rpx 20rpx;
			border-radius: 10rpx;
			margin-right: 10rpx;
		}

		.hint-close {
			font-size: 36rpx;
			color: #999;
			line-height: 1;
		}
	}
}

// Token错误提示样式
.token-error-hint {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 999;
	background: rgba(255, 247, 231, 0.95);
	padding: 20rpx;
	
	.hint-content {
		display: flex;
		align-items: center;
		
		.hint-text {
			flex: 1;
			font-size: 24rpx;
			color: #fa8c16;
		}
		
		.hint-btn {
			background: #fa8c16;
			color: #fff;
			font-size: 24rpx;
			padding: 5rpx 15rpx;
			margin: 0 20rpx;
			border-radius: 30rpx;
			line-height: 1.6;
			height: auto;
		}
		
		.hint-close {
			font-size: 40rpx;
			color: #999;
			padding: 0 10rpx;
		}
	}
}

// 设备管理样式
.device-management {
	margin-top: 30rpx;
	
	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		
		.add-button {
			background: #007aff;
			color: white;
			font-size: 26rpx;
			padding: 10rpx 20rpx;
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			
			.icon {
				margin-right: 6rpx;
				font-weight: bold;
			}
		}
	}
	
	.filter-wrapper {
		margin-bottom: 20rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		padding: 20rpx;
		
		.filter-title {
			font-size: 28rpx;
			color: #666;
			margin-bottom: 15rpx;
		}
		
		.filter-options {
			display: flex;
			flex-wrap: wrap;
			
			.filter-option {
				padding: 10rpx 20rpx;
				border-radius: 30rpx;
				margin-right: 15rpx;
				margin-bottom: 15rpx;
				font-size: 26rpx;
				background-color: #f0f0f0;
				color: #666;
				
				&.active {
					background-color: #007aff;
					color: white;
				}
			}
		}
	}
	
	.device-list {
		.empty-state {
			text-align: center;
			padding: 50rpx 0;
			color: #999;
			font-size: 28rpx;
		}
		
		.device-item {
			background-color: #ffffff;
			border-radius: 10rpx;
			padding: 20rpx;
			margin-bottom: 20rpx;
			display: flex;
			flex-direction: column;
			
			.device-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 15rpx;
				
				.device-name {
					font-size: 30rpx;
					font-weight: bold;
					color: #333;
				}
				
				.device-status {
					font-size: 24rpx;
					padding: 4rpx 12rpx;
					border-radius: 20rpx;
					
					&.online {
						background-color: rgba(0, 201, 87, 0.1);
						color: #00c957;
					}
					
					&.offline {
						background-color: rgba(150, 150, 150, 0.1);
						color: #999;
					}
					
					&.alert {
						background-color: rgba(255, 59, 48, 0.1);
						color: #ff3b30;
					}
				}
			}
			
			.device-info {
				display: flex;
				flex-wrap: wrap;
				font-size: 26rpx;
				color: #666;
				margin-bottom: 15rpx;
				
				.info-item {
					margin-right: 30rpx;
					margin-bottom: 10rpx;
					
					.label {
						color: #999;
						margin-right: 10rpx;
					}
				}
			}
			
			.device-actions {
				display: flex;
				justify-content: flex-end;
				
				.action-button {
					font-size: 24rpx;
					padding: 6rpx 16rpx;
					border-radius: 6rpx;
					margin-left: 15rpx;
					
					&.primary {
						background-color: #007aff;
						color: white;
					}
					
					&.secondary {
						background-color: #f0f0f0;
						color: #666;
					}
					
					&.danger {
						background-color: #ff3b30;
						color: white;
					}
				}
			}
		}
	}
}

// 弹窗样式
.modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 1000;
	display: flex;
	justify-content: center;
	align-items: center;
	
	.modal-content {
		width: 85%;
		background-color: #fff;
		border-radius: 20rpx;
		overflow: hidden;
		
		.modal-header {
			padding: 30rpx;
			border-bottom: 1px solid #eee;
			
			.modal-title {
				font-size: 34rpx;
				font-weight: bold;
				color: #333;
			}
		}
		
		.modal-body {
			padding: 30rpx;
			
			.form-group {
				margin-bottom: 25rpx;
				
				.form-label {
					font-size: 28rpx;
					color: #666;
					margin-bottom: 10rpx;
				}
				
				.form-input {
					width: 100%;
					height: 80rpx;
					border: 1px solid #ddd;
					border-radius: 10rpx;
					padding: 0 20rpx;
					font-size: 28rpx;
					box-sizing: border-box;
				}
				
				.form-select {
					width: 100%;
					height: 80rpx;
					border: 1px solid #ddd;
					border-radius: 10rpx;
					padding: 0 20rpx;
					font-size: 28rpx;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					justify-content: space-between;
					
					.select-value {
						color: #333;
					}
					
					.select-placeholder {
						color: #999;
					}
					
					.select-arrow {
						color: #999;
					}
				}
			}
			
			.form-error {
				color: #ff3b30;
				font-size: 26rpx;
				margin-bottom: 20rpx;
			}
			
			.delete-message {
				font-size: 28rpx;
				color: #666;
				line-height: 1.5;
				margin-bottom: 20rpx;
			}
		}
		
		.modal-footer {
			padding: 20rpx 30rpx;
			border-top: 1px solid #eee;
			display: flex;
			justify-content: flex-end;
			
			.modal-button {
				padding: 16rpx 30rpx;
				border-radius: 10rpx;
				font-size: 28rpx;
				margin-left: 20rpx;
				
				&.cancel {
					background-color: #f0f0f0;
					color: #666;
				}
				
				&.confirm {
					background-color: #007aff;
					color: white;
					
					&.loading {
						opacity: 0.7;
					}
				}
				
				&.delete {
					background-color: #ff3b30;
					color: white;
					
					&.loading {
						opacity: 0.7;
					}
				}
			}
		}
	}
}

.logs-entry {
	display: flex;
	align-items: center;
	padding: 10rpx 20rpx;
	background: #fff;
	border-radius: 10rpx;
	margin-bottom: 20rpx;
	
	.logs-entry-content {
		display: flex;
		align-items: center;
		
		.logs-icon {
			width: 30rpx;
			height: 30rpx;
			margin-right: 10rpx;
		}
		
		.logs-text {
			font-size: 28rpx;
			color: #666;
		}
	}
	
	.logs-arrow {
		font-size: 24rpx;
		color: #999;
	}
}

.device-management {
	margin-top: 30rpx;
	
	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		
		.add-button {
			background: #007aff;
			color: white;
			font-size: 26rpx;
			padding: 10rpx 20rpx;
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			
			.icon {
				margin-right: 6rpx;
				font-weight: bold;
			}
		}
	}
	
	.filter-wrapper {
		margin-bottom: 20rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		padding: 20rpx;
		
		.filter-title {
			font-size: 28rpx;
			color: #666;
			margin-bottom: 15rpx;
		}
		
		.filter-options {
			display: flex;
			flex-wrap: wrap;
			
			.filter-option {
				padding: 10rpx 20rpx;
				border-radius: 30rpx;
				margin-right: 15rpx;
				margin-bottom: 15rpx;
				font-size: 26rpx;
				background-color: #f0f0f0;
				color: #666;
				
				&.active {
					background-color: #007aff;
					color: white;
				}
			}
		}
	}
	
	.device-list {
		.empty-state {
			text-align: center;
			padding: 50rpx 0;
			color: #999;
			font-size: 28rpx;
		}
		
		.device-item {
			background-color: #ffffff;
			border-radius: 10rpx;
			padding: 20rpx;
			margin-bottom: 20rpx;
			display: flex;
			flex-direction: column;
			
			.device-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 15rpx;
				
				.device-name {
					font-size: 30rpx;
					font-weight: bold;
					color: #333;
				}
				
				.device-status {
					font-size: 24rpx;
					padding: 4rpx 12rpx;
					border-radius: 20rpx;
					
					&.online {
						background-color: rgba(0, 201, 87, 0.1);
						color: #00c957;
					}
					
					&.offline {
						background-color: rgba(150, 150, 150, 0.1);
						color: #999;
					}
					
					&.alert {
						background-color: rgba(255, 59, 48, 0.1);
						color: #ff3b30;
					}
				}
			}
			
			.device-info {
				display: flex;
				flex-wrap: wrap;
				font-size: 26rpx;
				color: #666;
				margin-bottom: 15rpx;
				
				.info-item {
					margin-right: 30rpx;
					margin-bottom: 10rpx;
					
					.label {
						color: #999;
						margin-right: 10rpx;
					}
				}
			}
			
			.device-actions {
				display: flex;
				justify-content: flex-end;
				
				.action-button {
					font-size: 24rpx;
					padding: 6rpx 16rpx;
					border-radius: 6rpx;
					margin-left: 15rpx;
					
					&.primary {
						background-color: #007aff;
						color: white;
					}
					
					&.secondary {
						background-color: #f0f0f0;
						color: #666;
					}
					
					&.danger {
						background-color: #ff3b30;
						color: white;
					}
				}
			}
		}
	}
}

.modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 1000;
	display: flex;
	justify-content: center;
	align-items: center;
	
	.modal-content {
		width: 85%;
		background-color: #fff;
		border-radius: 20rpx;
		overflow: hidden;
		
		.modal-header {
			padding: 30rpx;
			border-bottom: 1px solid #eee;
			
			.modal-title {
				font-size: 34rpx;
				font-weight: bold;
				color: #333;
			}
		}
		
		.modal-body {
			padding: 30rpx;
			
			.form-group {
				margin-bottom: 25rpx;
				
				.form-label {
					font-size: 28rpx;
					color: #666;
					margin-bottom: 10rpx;
				}
				
				.form-input {
					width: 100%;
					height: 80rpx;
					border: 1px solid #ddd;
					border-radius: 10rpx;
					padding: 0 20rpx;
					font-size: 28rpx;
					box-sizing: border-box;
				}
				
				.form-select {
					width: 100%;
					height: 80rpx;
					border: 1px solid #ddd;
					border-radius: 10rpx;
					padding: 0 20rpx;
					font-size: 28rpx;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					justify-content: space-between;
					
					.select-value {
						color: #333;
					}
					
					.select-placeholder {
						color: #999;
					}
					
					.select-arrow {
						color: #999;
					}
				}
			}
			
			.form-error {
				color: #ff3b30;
				font-size: 26rpx;
				margin-bottom: 20rpx;
			}
			
			.delete-message {
				font-size: 28rpx;
				color: #666;
				line-height: 1.5;
				margin-bottom: 20rpx;
			}
		}
		
		.modal-footer {
			padding: 20rpx 30rpx;
			border-top: 1px solid #eee;
			display: flex;
			justify-content: flex-end;
			
			.modal-button {
				padding: 16rpx 30rpx;
				border-radius: 10rpx;
				font-size: 28rpx;
				margin-left: 20rpx;
				
				&.cancel {
					background-color: #f0f0f0;
					color: #666;
				}
				
				&.confirm {
					background-color: #007aff;
					color: white;
					
					&.loading {
						opacity: 0.7;
					}
				}
				
				&.delete {
					background-color: #ff3b30;
					color: white;
					
					&.loading {
						opacity: 0.7;
					}
				}
			}
		}
	}
}
</style> 